<template>
  <div class="appClass">
    <h4>App</h4>
    <Suspense>
      <!-- Suspense 内置具名插槽，default 展示要渲染的组件 -->
      <template v-slot:default>
        <ChildComponent></ChildComponent>
      </template>
      <!-- Suspense 内置具名插槽，fallback 展示渲染组件没有准备好的时候的占位组件 -->
      <template v-slot:fallback>
        <h4>等一等</h4>
      </template>
    </Suspense>

  </div>
</template>

<script>
// import ChildComponent from './components/ChildComponent.vue' // 静态映入组件
import { defineAsyncComponent } from 'vue'
// defineAsyncComponent(() => import('...path')) 生成一个动态引入的组件
const ChildComponent = defineAsyncComponent(() => import('./components/ChildComponent.vue')) // 动态引入组件
export default {
  name: "App",
  components: {
    ChildComponent
  },
  setup() {
  }
};
</script>

<style>
.appClass {
  background-color: blueviolet;
  padding: 10px;
}
</style>
